<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-30 16:18:31
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-31 16:05:30
 * @FilePath: \guanggu_traffic\src\views\traffic\components\EventManage\SearchEvent.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<SearchResult
		v-model="isShowDialog"
		:searchData="searchData"
		@ClearSource="handleClearSource"
	></SearchResult>
</template>

<script setup>
import SearchResult from './SearchResult.vue'
import { ref, getCurrentInstance, onMounted } from 'vue'
import { createDraw } from '@/api/ol-api/createDraw'
import { Query } from '@/api/mapgis-api/Query'
const isShowDialog = ref(false) //空中查询结果对话框显示和隐藏
const searchData = ref([]) //保存查询结果
let map = null //地图实例
//mapgis地图文档
let service = {
	docName: import.meta.env.VITE_MAPGIS_DOC_NAME,
	layerId: 2,
}
const { proxy } = getCurrentInstance()
//设置标注图层和数据源icon
const source_icon = new ol.source.Vector({})
const layer_icon = new ol.layer.Vector({
	source: source_icon,
})
onMounted(() => {
	map = proxy.$map
	map.addLayer(layer_icon)
	map.addLayer(layer)
})
//设置icon标注样式图层
/******
 * 需求:根据处理状态不同显示 不同颜色标注
 * 思路:不能给图层设置同一的style需要设置每一个要素的style
 * *****************/
//不同状态做一个图片地址映射
const icon_map = {
	0: new URL('@/assets/images/定位-红色.png', import.meta.url).href, //待处理
	1: new URL('@/assets/images/定位-黄色.png', import.meta.url).href, //处理中
	2: new URL('@/assets/images/定位-绿色.png', import.meta.url).href, //已处理
}
const iconStyleSet = (num) => {
	//返回三种 icon_style
	return new ol.style.Style({
		image: new ol.style.Icon({
			anchor: [0.5, 60],
			anchorOrigin: 'top-right',
			anchorXUnits: 'fraction',
			anchorYUnits: 'pixels',
			offsetOrigin: 'top-right',
			scale: 0.8,
			opacity: 0.9,
			src: icon_map[num],
		}),
	})
}
//设置画笔 和画笔图层
let source = new ol.source.Vector({})
let layer = new ol.layer.Vector({
	source,
})
let draw = createDraw({
	type: 'Box',
	source,
	success: async (feature) => {
		//新一次绘制前移除之前的标注icon
		source_icon.clear()
		//移除上一次画笔图层数据要素
		setTimeout(() => {
			source.clear()
		}, 500)
		//获取要素的geometry
		let geometry = feature.getGeometry()
		//通过geometry查询mapgis要素
		let features = await Query.queryByGeometry({
			geometry,
			service,
		})
		/****
		 * 这里查询两次,因为复杂是内存,icon的要素和热力图使用的props.searchData是同一个指向的,
		 * 需要查询两次来区分或者第三方库loadsh实现深拷贝        *
		 * *************/
		//深拷贝
		// let features_icon = JSON.parse(JSON.stringify(features))
		let features_icon = await Query.queryByGeometry({
			geometry,
			service,
		})
		//设置查询结果弹窗显示
		isShowDialog.value = true
		//保存查询结果
		searchData.value = features;
		//遍历要素数组不同状态的数据设置不同的样式
		features_icon.forEach((feature) => {
			if (feature.values_.values_.处理状态 == 0) {
				feature.setStyle(iconStyleSet(0))
			} else if (feature.values_.values_.处理状态 == 1) {
				feature.setStyle(iconStyleSet(1))
			} else {
				feature.setStyle(iconStyleSet(2))
			}
		})
		//将查询事件要素添加到标注图层里
		layer_icon.getSource().addFeatures(features_icon)
		map.removeInteraction(draw)
	},
})
//激活画笔事件回调
function activeDraw() {
	map.addInteraction(draw)
}
//将激活画笔方法暴露给父组件
defineExpose({
	activeDraw,
})
const handleClearSource = () => {
	//清空标注图层数据源
	source_icon.clear()
	source.clear()
}
</script>

<style lang="scss" scoped></style>
